<template>
  <div class="container margin-auto">
    <div class="home-about mt50 mb50 tc">
      每一天都要学习，每一天都是学习!
    </div>
    <div class="home-body margin-auto clear">
      <div class="home-left pt50">
        <div class="nav">
          <div class="avatar-name margin-auto">
            <div class="avatar p10">
              <img src="../../static/img/avatar.jpg" alt="" srcset="">
            </div>
            <div class="name tc mb20">
              <i>Liu Yang</i>
            </div>
          </div>
        </div>
        <div class="contents">
          <ul>
            <li class="mt20 mb20" @click="toLink('index')" :class="{active: rightLabel === 'index' || rightLabel === ''}"><i class="fas fa-home"></i>主页</li>
            <li class="mt20 mb20" @click="toLink('tags')" :class="{active: rightLabel === 'tags' }"><i class="fas fa-tags"></i>标签</li>
            <li class="mt20 mb20" @click="toLink('save')" :class="{active: rightLabel === 'save'}"><i class="fas fa-save"></i>存档</li>
            <li class="mt20 mb20" @click="toLink('about')" :class="{active: rightLabel === 'about'}"><i class="fas fa-user"></i>关于</li>
            <li class="mt20 mb20" @click="toLink('search')" :class="{active: rightLabel === 'search'}"><i class="fas fa-search"></i>搜索</li>
          </ul>
        </div>
      </div>
      <div class="home-right pl30">
        <About v-if="rightLabel === 'about'"></About>
        <Index v-if="rightLabel === 'index' || rightLabel === ''"></Index>
        <Save v-if="rightLabel === 'save'"></Save>
        <Search v-if="rightLabel === 'search'"></Search>
        <Tags v-if="rightLabel === 'tags'"></Tags>
      </div>
    </div>
  </div>
</template>

<script>
import About from '@/components/pages/About';
import Index from '@/components/pages/Index';
import Save from '@/components/pages/Save';
import Search from '@/components/pages/Search';
import Tags from '@/components/pages/Tags';

import { getMousePos } from '@/components/common/commonMethonds'

export default {
  name: 'Home',
  data() {
    return {
      msg: 'liuyang Blog',
      // 右侧组件标志位
      rightLabel: '',
      // 渲染层变量
    };
  },
  components: {
    About,
    Index,
    Save,
    Search,
    Tags
  },
  mounted() {
    getMousePos()

  },
  methods: {
    toLink(param) {
      this.rightLabel = param;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .container{
    width: 1024px;
    height: auto;
    position: absolute;
    top: 0;
    left: calc((100% - 1024px)/2);
    .home-about{
      width: 100%;
      font-size: 15px;
      font-family: "italic" !important;
      font-weight: 300;
      color: #444444;
    }
    .home-body{
      width: 1024px;
      height: auto;
      .home-left,.home-right{
        height: auto;
        float: left;
      }
      .home-left{
        width: 180px;
        .nav{
          width: 100%;
          .avatar-name{
            width: 120px;
            border-bottom: 1px solid #979797;
            .avatar{
              width: 100%;
              img{
                width: calc(100% - 20px);
              }
            }
            .name{
              width: 100%;
            }
          }
        }
        .contents{
          display: flex;
          flex-direction: column;
          align-items: center;
          ul{
            li{
              font-size: 15px;
              opacity: .7;
              svg{
                display: inline-block;
                width: 23px;
              }
            }
            li:hover{
              opacity: 1;
              cursor: pointer;
            }
          }
        }
      }
      .home-right{
        width: calc(100% - 210px);
      }
    }
  }
</style>
